import React from "react";
import { connect } from 'react-redux'
import { Button, Checkbox, Form, Input, message, Space, Divider, Typography } from 'antd';
import { Outlet, useNavigate } from "react-router-dom";
const info = () => {
    message.info('请输入用户！');
};
function Passemail(props) {
    const navigate = useNavigate()
    // console.log('props', props);
    const onFinish = (values) => {
        // console.log('Success:', values);
    };

    const onFinishFailed = (errorInfo) => {
        // console.log('Failed:', errorInfo);
    };

    return (
        <>
            <p>邮箱找回密码</p>

            <Form
                name="basic"
                labelCol={{
                    span: 8,
                }}
                wrapperCol={{
                    span: 16,
                }}
                initialValues={{
                    remember: true,
                }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
            >
                {/* 邮箱 */}
                <Form.Item
                    label=""
                    name="username"
                    rules={[
                        {
                            required: true,
                            // message: 'Please input your username!',
                        },
                    ]}
                    wrapperCol={{
                        span: 6,
                        push: 9
                    }}
                >
                    <Input placeholder="请输入您绑定的邮箱" style={{ background: '#F5F5F5', border: ' 1px solid #EEEEEE' }} />
                </Form.Item>

                {/* 验证码 */}
                <Form.Item
                    label=""
                    name="verify"
                    rules={[
                        {
                            required: true,
                            // message: 'Please input your password!',
                        },
                    ]}
                    wrapperCol={{
                        span: 3,
                        push: 9
                    }}
                >
                    <Input placeholder="请输入验证码" style={{ background: '#F5F5F5', border: ' 1px solid #EEEEEE' }} />
                </Form.Item>



                {/* 获取验证码 */}
                <Form.Item
                    label=""
                    name="btn_send"
                    rules={[
                        {
                            required: true,
                            // message: 'Please input your password!',
                        },
                    ]}
                    wrapperCol={{
                        span: 6,
                        push: 9
                    }}
                >
                    <Input placeholder="获取验证码" style={{ background: '#F5F5F5', border: ' 1px solid #EEEEEE' }} />
                </Form.Item>

                {/* 验证码 */}
                <Form.Item
                    label=""
                    name="code"
                    rules={[
                        {
                            required: true,
                            // message: 'Please input your password!',
                        },
                    ]}
                    wrapperCol={{
                        span: 6,
                        push: 9
                    }}
                >
                    <Input placeholder="请输入验证码" style={{ background: '#F5F5F5', border: ' 1px solid #EEEEEE' }} />
                </Form.Item>




                {/* 验证码 */}
                <Form.Item
                    label=""
                    name="user_pwd"
                    rules={[
                        {
                            required: true,
                            // message: 'Please input your password!',
                        },
                    ]}
                    wrapperCol={{
                        span: 6,
                        push: 9
                    }}
                >
                    <Input type="password" placeholder="请输入新密码" style={{ background: '#F5F5F5', border: ' 1px solid #EEEEEE' }} />
                </Form.Item>



                {/* 验证码 */}
                <Form.Item
                    label=""
                    name="user_pwd2"
                    rules={[
                        {
                            required: true,
                            // message: 'Please input your password!',
                        },
                    ]}
                    wrapperCol={{
                        span: 6,
                        push: 9
                    }}
                >
                    <Input type="password" placeholder="请输入确认密码" style={{ background: '#F5F5F5', border: '1px solid #EEEEEE' }} />
                </Form.Item>

                {/* 立即注册按钮 */}
                <Form.Item
                    wrapperCol={{
                        offset: 9,
                        span: 6,
                    }}
                >
                    <Button block={true} type="primary" htmlType="submit" onClick={info} size='large' style={{ background: '#25252b' }}>
                        重置密码
                    </Button>
                </Form.Item>
            </Form>


            {/* 底部 */}
            <div style={{
                display: 'flex',
                justifyContent: 'center'

            }}>
                {/* <Space align='center' >
                    <Button size='small' onClick={() => {
                        navigate('/user/findpass')
                    }}>用问题找回</Button>
                    <Button size='small' onClick={() => {
                        navigate('/user/passemail')
                    }}>用邮箱找回</Button>
                </Space> */}



                <Space split={<Divider type="vertical" />}>
                    <Typography.Link style={{ color: '#282828' }} onClick={() => {
                        navigate('/user/findpass')
                    }}>用问题找回</Typography.Link>
                    <Typography.Link style={{ color: '#282828' }} onClick={() => {
                        navigate('/user/passemail')
                    }}>用邮箱找回</Typography.Link>

                </Space>
            </div>
        </>

    );

}


// Login = connect((state) => {
//     console.log('state', state);

//     return {
//         user: '123'
//     }
// }, (dispatch) => {
//     return {
//         login(userInfo) {
//             dispatch({ type: 'login', payload: userInfo })
//         }
//     }
// })(Login)

// 映射Redux状态到组件的props
const mapStateToProps = function (state) {
    return {
        user: state.userInfo
    }
}

// 把修改redux的方法映射到props
const mapDispatchToProps = function (dispatch) {
    return {
        logout() {
            dispatch({ type: 'login' })
        }
    }
}
Passemail = connect(mapStateToProps, mapDispatchToProps)(Passemail)

export default Passemail